<!DOCTYPE html>
<!--
  ~ Copyright (C) 2018 The Asiainfo-Ability Authors
  ~
  ~      Licensed under the Apache License, Version 2.0 (the "License");
  ~      you may not use this file except in compliance with the License.
  ~      You may obtain a copy of the License at
  ~
  ~          http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~      Unless required by applicable law or agreed to in writing, software
  ~      distributed under the License is distributed on an "AS IS" BASIS,
  ~      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~      See the License for the specific language governing permissions and
  ~      limitations under the License.
  -->

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>简单业务接入管理</title>
    <link rel="stylesheet" href="public/layui/css/layui.css">
    <link rel="stylesheet" href="css/app.css">
    <link rel="stylesheet" href="css/green.css">
    <link rel="stylesheet" href="css/nprogress.css">
    <style>
        .info-box {
            height: 85px;
            background-color: white;
            background-color: #ecf0f5;
        }

        .info-box .info-box-icon {
            border-top-left-radius: 2px;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 2px;
            display: block;
            float: left;
            height: 85px;
            width: 85px;
            text-align: center;
            font-size: 45px;
            line-height: 85px;
            background: rgba(0, 0, 0, 0.2);
        }

        .info-box .info-box-content {
            padding: 10px;
            margin-left: 85px;
        }

        .info-box .info-box-content .info-box-text {
            display: block;
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-transform: uppercase;
        }

        .info-box .info-box-content .info-box-a {
            display: block;
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            margin: 0 auto;
            width: 60px;
        }

        .info-box .info-box-content .info-box-number {
            display: block;
            font-weight: bold;
            font-size: 18px;
        }

        .major {
            font-weight: 10px;
            color: #01AAED;
        }

        .main {
            margin-top: 25px;
        }

        .main .layui-row {
            margin: 10px 0;
        }
    </style>
</head>
<body class="layui-layout-body kit-theme" style="overflow-y:auto">
<div class="layui-fluid main">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md3" style="display:inline-block">
            <div class="info-box">
                <span class="info-box-icon" style="background-color:#00c0ef !important;color:white;">A</span>
                <div class="info-box-content">
                    <span class="info-box-text">能力总数</span>
                    <span class="info-box-number">2</span>
                    <span class="info-box-text">生效：<span class="layui-badge">2</span> 禁用：<span
                            class="layui-badge">0</span></span>
                </div>
            </div>
        </div>
        <div class="layui-col-md3" style="display:inline-block">
            <div class="info-box">
                <span class="info-box-icon" style="background-color:#f39c12 !important;color:white;">U</span>
                <div class="info-box-content">
                    <span class="info-box-text">用户总数</span>
                    <span class="info-box-number">8</span>
                    <span class="info-box-text">生效：<span class="layui-badge">0</span> 禁用：<span
                            class="layui-badge">2</span></span>
                </div>
            </div>
        </div>
        <div class="layui-col-md3" style="display:inline-block">
            <div class="info-box">
                <span class="info-box-icon" style="background-color:#00a65a !important;color:white;">S</span>
                <div class="info-box-content">
                    <span class="info-box-text">服务总数</span>
                    <span class="info-box-number">73</span>
                    <span class="info-box-text">运行：<span class="layui-badge">0</span> 停止：<span
                            class="layui-badge">2</span></span>
                </div>
            </div>
        </div>
    </div>
    <br>


    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <ul class="layui-timeline">
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                    <div class="layui-timeline-content layui-text">
                        <h3 class="layui-timeline-title">系统概述</h3>
                        <ul>
                            <li>xxx
                            </li>
                            <li>xxx
                            </li>
                            <li>xxx</li>
                        </ul>
                    </div>
                </li>
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                    <div class="layui-timeline-content layui-text">
                        <h3 class="layui-timeline-title">注意事项</h3>
                        <ul>
                            <li>xxxx。</li>
                            <li>xxxx <a href="javascript:;" target="_blank">常见问题</a></li>
                            <li>使用文档 <a href="javascript:;" target="_blank">查看使用文档</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <script src="public/layui/layui.all.js"></script>
    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/loader.js"></script>
    <script>
        //JavaScript代码区域


        layui.use('element', function () {
            var element = layui.element;
            var active = {
                tabAdd: function () {
                    //新增一个Tab项
                    element.tabAdd('demo', {
                        title: '新选项' + (Math.random() * 1000 | 0) //用于演示
                        , content: '内容' + (Math.random() * 1000 | 0)
                        , id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下

                    })
                }
                , tabDelete: function (othis) {
                    //删除指定Tab项
                    element.tabDelete('demo', '44'); //删除：“商品管理”


                    othis.addClass('layui-btn-disabled');
                }
                , tabChange: function () {
                    //切换到指定Tab项
                    element.tabChange('demo', '22'); //切换到：用户管理
                }
            };
            var group = {};
            $('.layui-nav-item').on('click', function () {

                var othis = $(this);
                var id = othis[0].getAttribute("data-id");
                oka.loading.animLine();
                if (!group[id]) {
                    element.tabAdd('kitTab', {
                        title: othis[0].querySelector(".sac-text").innerText
                        ,
                        content: '<iframe src="' + id + '.html" name="ifames" style="height: ' + ($("#container")[0].clientHeight - 46) + 'px;"></iframe>'
                        ,
                        id: id //实际使用一般是规定好的id，这里以时间戳模拟下
                    });
                    group[id] = 1;
                }

                othis = null;
                element.tabChange('kitTab', id);
            });
            element.on('tabDelete(kitTab)', function (data) {
                delete group[(this.parentNode.getAttribute("lay-id"))];
            });

            var isOpen = false;
            $("#kit-tab-tool").on('click', function () {
                if (isOpen) {

                }
                $("#closeTabPanel")[0].style.display = isOpen ? 'none' : 'block';
                isOpen = !isOpen;
            });

            $("#logout").on('click', function () {
                location.href = "login.html";
            });


        });
    </script>
</body>
</html>
      